<!-- 通道定制 -->
<template>
  <div>
    <div class="title">
      <span>通道定制</span>
      <div>
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>

    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div class="lineitem">商户名</div>
          <div class="lineitem">{{ channelinfo.merchantName }}</div>
        </div>
        <div class="line">
          <div class="lineitem">商户号</div>
          <div class="lineitem">{{ channelinfo.merchantNo }}</div>
        </div>
        <div class="line">
          <div class="lineitem">通道类型</div>
          <div class="lineitem">{{ channelinfo.channelName }}</div>
        </div>
        <!-- <div class="line"></div> -->
        <div class="line">
          <div class="lineitem">通道商户号</div>
          <div class="lineitem">
            <el-input
              class="inputsize"
              v-model="channelinfo.mchId"
              placeholder=""
            ></el-input>
          </div>
        </div>
        <div class="line">
          <div class="lineitem">服务商机构号</div>
          <div class="lineitem">
            <el-input
              class="inputsize"
              v-model="channelinfo.servInstno"
              placeholder=""
            ></el-input>
          </div>
        </div>

        <div class="line"></div>
        <div class="line" v-if="showAliEdu">
          <div class="lineitem">支付宝学校ID/校区ID</div>
          <div class="lineitem">
            <el-input
              class="inputsize"
              v-model="channelinfo.aliEduSchoolId"
              placeholder=""
            ></el-input>
          </div>
        </div>
        <div class="line" v-if="showAliEdu">
          <div class="lineitem">支付宝校园内服务场景</div>
          <div class="lineitem">
            <el-input
              class="inputsize"
              v-model="channelinfo.aliEduScene"
              placeholder=""
            ></el-input>
          </div>
        </div>
      </div>
      <div class="wxbox">
        <div class="h4"><h4>微信</h4></div>
        <div class="linebox">
          <div class="line">
            <div class="lineitem">微信子商户号</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.wxMchId"
                placeholder=""
              ></el-input>
            </div>
          </div>

          <div class="line">
            <div class="lineitem">公众号AppId</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.wxServAppid"
                placeholder=""
              ></el-input>
            </div>
          </div>

          <div class="line">
            <div class="lineitem">小程序AppId</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.wxServMiniAppid"
                placeholder=""
              ></el-input>
            </div>
          </div>

          <div class="line">
            <div class="lineitem">公众号AppSecret</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.wxServAppsecret"
                placeholder=""
              ></el-input>
            </div>
          </div>

          <div class="line">
            <div class="lineitem">小程序AppSecret</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.wxServMiniAppsecret"
                placeholder=""
              ></el-input>
            </div>
          </div>
        </div>

        <div class="h4"><h4>费率</h4></div>
        <div class="tablebox">
          <table>
            <tr>
              <td>扫码支付</td>
              <td>二维码支付</td>
              <td>JS支付</td>
              <td>WAP支付</td>
              <td>APP支付</td>
              <td>小程序支付</td>
            </tr>
            <tr>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.wxRate1"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.wxRate2"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.wxRate3"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.wxRate4"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.wxRate5"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.wxRate6"
                  placeholder=""
                ></el-input
                >‰
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="wxbox">
        <div class="h4"><h4>支付宝</h4></div>
        <div class="linebox">
          <div class="line">
            <div class="lineitem">支付宝PID</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.aliUserId"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="line">
            <div class="lineitem">支付宝AppId</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.aliAppId"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="line">
            <div class="lineitem">支付宝卖家账号</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.alipayAccount"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="line">
            <div class="lineitem">支付宝间联smid</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.aliSmid"
                placeholder=""
              ></el-input>
            </div>
          </div>
        </div>
        <div class="h4"><h4>费率</h4></div>
        <div class="tablebox">
          <table>
            <tr>
              <td>扫码支付</td>
              <td>二维码支付</td>
              <td>JS支付</td>
              <td>WAP支付</td>
              <td>APP支付</td>
              <td>小程序支付</td>
            </tr>
            <tr>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.aliRate1"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.aliRate2"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.aliRate3"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.aliRate4"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.aliRate5"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.aliRate6"
                  placeholder=""
                ></el-input
                >‰
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="wxbox">
        <div class="h4"><h4>云闪付</h4></div>
        <div class="linebox">
          <div class="line">
            <div class="lineitem">云闪付间联子商户号</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.uniSmid"
                placeholder=""
              ></el-input>
            </div>
          </div>
        </div>

        <div class="h4"><h4>费率</h4></div>
        <div class="tablebox">
          <table>
            <tr>
              <td>扫码支付</td>
              <td>二维码支付</td>
              <td>JS支付</td>
              <td>WAP支付</td>
              <td>APP支付</td>
              <td>小程序支付</td>
            </tr>
            <tr>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.uniRate1"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.uniRate2"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.uniRate3"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.uniRate4"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.uniRate5"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.uniRate6"
                  placeholder=""
                ></el-input
                >‰
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="wxbox" v-if="channelType == 37">
        <div class="h4"><h4>龙支付</h4></div>
        ·
        <div class="linebox">
          <div class="line1">
            <div class="lineitem1">龙支付间联子商户号</div>
            <div class="lineitem" style="margin-right: 1rem">
              <el-input
                class="inputsize"
                v-model="channelinfo.longpaySmid"
                placeholder=""
              ></el-input>
            </div>
            <div class="lineitem1">龙支付分行号</div>
            <div class="lineitem" style="margin-right: 1rem">
              <el-input
                class="inputsize"
                v-model="channelinfo.longpayBranchId"
                placeholder=""
              ></el-input>
            </div>
            <div class="lineitem1">龙支付操作员账号</div>
            <div class="lineitem" style="margin-right: 1rem">
              <el-input
                class="inputsize"
                v-model="channelinfo.longpayOperatorId"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="line1" style="margin-top: 1rem">
            <div class="lineitem1">龙支付操作员密码</div>
            <div class="lineitem" style="margin-right: 1rem">
              <el-input
                class="inputsize"
                v-model="channelinfo.longpayOperatorPw"
                placeholder=""
              ></el-input>
            </div>
            <div class="lineitem1">龙支付证书密码</div>
            <div class="lineitem" style="margin-right: 1rem">
              <el-input
                class="inputsize"
                v-model="channelinfo.longpayCertPw"
                placeholder=""
              ></el-input>
            </div>
            <div class="lineitem1">龙支付默认柜台号</div>
            <div class="lineitem" style="margin-right: 1rem">
              <el-input
                class="inputsize"
                v-model="channelinfo.longpayPostId"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="line1" style="margin-top: 1rem">
            <div class="lineitem1">龙支付默认公钥</div>
            <div class="lineitem" style="width: 68%">
              <el-input
                type="textarea"
                style="width: 100%"
                v-model="channelinfo.longpayPublicKey"
                placeholder=""
              ></el-input>
            </div>
          </div>
          <div class="line1" style="margin-top: 1rem">
            <div class="lineitem1">龙支付证书上传</div>
            <div class="lineitem CertificateUpload" style="width: 68%">
              <el-input
                placeholder="上传地址"
                class="inputsize"
                style="width: 400px"
                v-model="channelinfo.platRsaPublic"
              ></el-input>
              <!-- <el-upload
                accept=".pfx"
                class="upload-demo"
                ref="certificateUpload"
                action="http://192.168.130.74:9099/product/v31/api/merchant/uploadfile/longPayUpload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload> -->
              <el-upload
                ref="certificateUpload"
                class="upload-demo"
                accept=".pfx"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :before-upload="beforeUpload"
                :on-success="successUploadFiled"
                :on-error="uploadError"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :headers="token"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <!-- upload-demo -->
              </el-upload>
            </div>
          </div>
        </div>

        <div class="h4"><h4>费率</h4></div>
        <div class="tablebox">
          <table>
            <tr>
              <td>扫码支付</td>
              <td>二维码支付</td>
              <td>JS支付</td>
              <td>WAP支付</td>
              <td>APP支付</td>
              <td>小程序支付</td>
            </tr>
            <tr>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.longpayRate1"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.longpayRate2"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.longpayRate3"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.longpayRate4"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.longpayRate5"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.longpayRate6"
                  placeholder=""
                ></el-input
                >‰
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="wxbox" v-if="channelType == 6">
        <div class="h4"><h4>翼支付</h4></div>
        <div class="linebox">
          <div class="line">
            <div class="lineitem1">翼支付间联子商户号</div>
            <div class="lineitem2">
              <el-input
                class="inputsize"
                v-model="channelinfo.bestPaySmid"
                placeholder=""
              ></el-input>
            </div>
            <div class="lineitem1">翼支付机构号</div>
            <div class="lineitem2">
              <el-input
                class="inputsize"
                v-model="channelinfo.bestpayInst"
                placeholder=""
              ></el-input>
            </div>
            <div class="lineitem1">翼支付私钥密码</div>
            <div class="lineitem2">
              <el-input
                class="inputsize"
                v-model="channelinfo.bestpayPrikeyPwd"
                placeholder=""
              ></el-input>
            </div>
          </div>
        </div>

        <div class="h4"><h4>费率</h4></div>
        <div class="tablebox">
          <table>
            <tr>
              <td>扫码支付</td>
              <td>二维码支付</td>
              <td>JS支付</td>
              <td>WAP支付</td>
              <td>APP支付</td>
              <td>小程序支付</td>
            </tr>
            <tr>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.bestPayRate1"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.bestPayRate2"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.bestPayRate3"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.bestPayRate4"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.bestPayRate5"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.bestPayRate6"
                  placeholder=""
                ></el-input
                >‰
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="wxbox" v-if="channelType == 38">
        <div class="h4"><h4>数字人民币</h4></div>
        <div class="linebox">
          <div class="line">
            <div class="lineitem">数字人民币间联子商户号</div>
            <div class="lineitem">
              <el-input
                class="inputsize"
                v-model="channelinfo.ecnySmid"
                placeholder=""
              ></el-input>
            </div>
          </div>
        </div>

        <div class="h4"><h4>费率</h4></div>
        <div class="tablebox">
          <table>
            <tr>
              <td>扫码支付</td>
              <td>二维码支付</td>
              <td>JS支付</td>
              <td>WAP支付</td>
              <td>APP支付</td>
              <td>小程序支付</td>
            </tr>
            <tr>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.ecnyRate1"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.ecnyRate2"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.ecnyRate3"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.ecnyRate4"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.ecnyRate5"
                  placeholder=""
                ></el-input
                >‰
              </td>
              <td>
                <el-input
                  class="inputmini"
                  size="mini"
                  v-model="channelinfo.ecnyRate6"
                  placeholder=""
                ></el-input
                >‰
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="btnbox">
        <el-button type="primary" @click="updata">修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { channeldetail, channeldetailupdate } from "@/api/api";
export default {
  data() {
    return {
      uploadUrl:
        process.env.VUE_APP_BASE_URL +
        "/product/v31/api/merchant/uploadfile/longPayUpload",
      // rules: {
      //   number: [
      //     { required: true, message: "请输入内容", trigger: 'blur'},
      //     { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数'}
      //   ]
      // },
      channel: "",
      showAliEdu: false,
      channelinfo: {
        platRsaPublic: "",
      },
      token: { token: sessionStorage.getItem("token") },
      channelType: "",
    };
  },
  created() {
    this.channel = sessionStorage.getItem("channel");
    channeldetail({}, this.channel).then((res) => {
      console.log(res);
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else {
        this.channelinfo = res.data;
        this.channelType = res.data.channelType;
        if (res.data.channelType == 6 || res.data.channelType == 26) {
          this.showAliEdu = true;
        }
      }
    });
  },
  methods: {
    beforeUpload(file) {
      const MAX_SIZE = 1024 * 1024; // 设定最大文件大小为1MB
      if (file.size > MAX_SIZE) {
        this.$message.error("文件大小不能超过1MB!");
        return false; // 返回false停止上传
      }
      return true; // 返回true允许上传
    },
    successUploadFiled(res) {
      // console.log(res, "////////////");
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        // console.log(res.data.filePath);
        this.channelinfo.platRsaPublic = res.data.filePath;
        // console.log('///////////',this.channelinfo.platRsaPublic);
      } else {
        this.$message.error(res.data.message);
      }
      this.$refs.certificateUpload.clearFiles();
    },
    uploadError(res) {
      console.log(res);

      this.$refs.certificateUpload.clearFiles(); //去掉文件列表
    },
    updata() {
      console.log("=", this.$refs.certificateUpload);

      this.channelType == 37 ? this.$refs.certificateUpload.submit() : null;
      channeldetailupdate(
        {
          ...this.channelinfo,
        },
        this.channel
      ).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.CertificateUpload {
  display: flex;
}
.upload-demo {
  margin-left: 10px;
}
.upload-demo /deep/ .el-upload--text {
  width: 78px;
  height: 30px;
  border: none;
}
.el-button--small {
  padding: 8px 14px;
}
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .itemBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
    .line {
      width: 50%;
      display: flex;
      font-size: 14px;
      line-height: 200%;
      padding-bottom: 5px;
      .lineitem:nth-child(1) {
        width: 30%;
        text-align: left;
      }
      .lineitem:nth-child(2) {
        width: 70%;
        text-align: left;
        color: #888888;
      }
      .inputsize {
        width: 65%;
        margin-right: 20px;
      }
    }
  }
  .wxbox {
    margin: 10px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
    .linebox {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-top: 13px;
      .line1 {
        width: 100%;
        display: flex;
        font-size: 14px;
        line-height: 200%;
        margin-bottom: 5px;

        .lineitem1 {
          width: 12%;
          text-align: left;
        }
        .lineitem2 {
          width: 15%;
          text-align: left;
        }
      }
      .line {
        width: 48%;
        display: flex;
        font-size: 14px;
        line-height: 200%;
        margin-bottom: 13px;
        .lineitem:nth-child(1) {
          width: 20%;
          text-align: center;
        }
        .lineitem:nth-child(2) {
          width: 60%;
          text-align: left;
          color: #888888;
        }
        .inputsize {
          width: 65%;
        }
      }
    }

    .tablebox {
      width: 100%;
      padding-top: 13px;
      table {
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        border-spacing: 0;
        tr {
          width: 100%;
          td {
            padding: 10px 15px;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
            text-align: center;
            .inputmini {
              width: 33%;
            }
            .inputlarge {
              width: 100%;
            }
            input {
              text-align: center !important;
            }
          }
        }
      }
    }
  }
  .btnbox {
    width: 100%;
    padding: 20px 0;
    text-align: center;
  }
  .h4 {
    padding-bottom: 10px;
    padding-top: 5px;
  }
}
</style>